<template>
  <div class="text-lg font-bold mt-10">课程章节</div>
  <CommonLack v-show="!chapter" />
  <div
    v-if="chapter.length > 0"
    class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-5 gap-5 mt-5 w-full"
  >
    <div v-for="data in chapter" class="card min-h-[8rem] h-full">
      <div
        :class="[
          'card-body  card-border bg-base-200  p-5',
          isClick ? 'course-card-hove' : '',
        ]"
        @click="clickManner(data.id)"
      >
        <div class="card-title text-base break-words line-clamp-3">
          {{ data.title }}
        </div>
        <p class="text-sm text-gray-500">{{ data.desc }}</p>
        <p class="text-xs text-gray-500">{{ data.contentCount }}词</p>
        <template v-if="data.userCourseChapters">
          <div class="flex items-center gap-5">
            <template v-if="data.userCourseChapters.lastAt">
              <div class="text-xs text-gray-400 flex gap-1 items-center">
                <component :is="ClockIcon" class="w-3.5 h-3.5" />
                <span>{{ getMinutes(data.userCourseChapters.studyTime) }}</span>
              </div>
              <div class="text-xs text-gray-400 flex gap-1 items-center">
                <component :is="CalendarDaysIcon" class="w-3.5 h-3.5" />
                <span>{{ getDays(data.userCourseChapters.lastAt) }}</span>
              </div>
            </template>
          </div>
          <div
            class="badge badge-primary text-xs text-white absolute top-0 right-0"
            v-if="lastChapterId === data.id"
          >
            <component :is="PaintBrushIcon" class="w-3 h-3" />
            最近学习
          </div>
        </template>
      </div>
    </div>
  </div>
  <template v-if="isClick">
    <Manner
      :isOpen="mannerShow"
      @close="mannerShow = false"
      :chapterId="chapterId"
    />
  </template>
</template>
<script setup lang="ts">
import {
  BookOpenIcon,
  CalendarDaysIcon,
  ClockIcon,
  PaintBrushIcon,
} from "@heroicons/vue/24/solid";
import { timeSet } from "~/composables/common/time";
const { getDays, getMinutes } = timeSet();
import { toast } from "vue-sonner";

const props = defineProps({
  chapter: {
    type: Array as any,
    default: () => [],
  },
  isClick: {
    type: Boolean,
    default: false,
  },
  lastChapterId: {
    type: String,
    default: "",
  },
});

onMounted(() => {});

const chapterId = ref("");

const mannerShow = ref(false);
const clickManner = (id: string) => {
  mannerShow.value = true;
  chapterId.value = id;
};
</script>
